<template>
  <div class="divBox">
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="search.user" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="下拉">
              <el-select v-model="search.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchQuery" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="count"
          :page-sizes="[100, 200, 300, 400]" :page-size="search.limit" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
      <!-- 弹出编辑区域 -->
      <el-dialog title="编辑" :visible.sync="editDialogVisible" width="60%">

        <el-form :model="editData" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model.number="editData.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        editData: {},
        search: {
          limit: 0,
          page: 15
        },
        count: 100,
        tableData: [{
          date: "xxxx",
          name: "xxxx",
          address: "sddsds"
        }],
        tableLoading: false, //设置table加载动画
        editDialogVisible: false, //编辑弹出
        rules: {},
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      searchQuery() {
        this.search.page = 0
        this.getList()
      },
      getList() {
        // this.tableLoading = true
        // api(this.search).then(res => {
        //   this.count = res.data.count
        //   this.tableData = res.data.data
        //   this.tableLoading = false
        // }).catch(err => {
        //   this.$message.error(res.message);
        //   this.tableLoading = false;
        // })
      },
      save() { // insert  update
        this.editDialogVisible = false
        this.editData;
        this.editData = {}
      },
      del(row) {
        let This = this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //请求接口删除数据
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });

      },
      edit(data) {
        this.editDialogVisible = true
        this.editData = JSON.parse(JSON.stringify(data))
        console.log(data)
      },
      handleSizeChange(val) {
        this.search.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.search.page = val
        this.getList()
      }
    }
  }
</script>

<style>
</style>
